/**
 * useImperativeHandle
 *
 *    概念：
 *      结合 forwardRef() 来实现一个函数组件对外的暴露
 *
 *    语法：
 *      useImperativeHandle(ref, createHandle, dependencies?)
 *        ref: forwardRef() 转发得到的 ref 数据
 *        createHandle: 一个函数，该函数的返回值，就是对外的暴露
 *        dependencies： 触发 createHandle 重新执行的一个依赖项数组
 */

import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from "react";

const Hello = forwardRef((props, ref) => {
  const [msg, setMsg] = useState("~");

  useImperativeHandle(ref, () => {
    console.log("createHandle");
    // 返回值就是对外的暴露
    return {
      a: 1,
      msg,

      addMsg() {
        setMsg("wo de tian");
      },
    };
  });

  return (
    <div>
      <h4>Hello</h4>
      <button onClick={() => setMsg(msg + "~")}>{msg}</button>
    </div>
  );
});

export default function App() {
  const hRef = useRef(null);

  useEffect(() => {
    // 挂载完成的效果
    // console.log("hRef", hRef.current);
  }, []);

  return (
    <div>
      <h1>App</h1>

      <button
        onClick={() => {
          console.log("hRef", hRef.current.msg);
        }}
      >
        获取 Hello 中的 msg
      </button>

      <button
        onClick={() => {
          hRef.current.addMsg();
        }}
      >
        修改 Hello 中的 msg
      </button>
      <hr />

      <Hello ref={hRef} />
    </div>
  );
}
